<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>携程旅行-酒店预订,机票预订查询,旅游度假,商旅管理-携程无线官网</title>
    <link rel="stylesheet" href="css/normalize.css" />
    <link rel="stylesheet" href="css/index.css" />
  </head>
  <body>
    <!-- 页面头部区域开始 -->
    <header>
      <!-- 页面搜索区域开始 -->
      <div class="login">
        <a class="search">
          <span>搜索:目的地/酒店/景点/航班号</span>
        </a>
        <div class="mine">
          <i></i>
          <span>我的</span>
        </div>
      </div>
      <!-- 页面搜索区域结束 -->
      <!-- 页面搜索区域开始 -->
      <div class="bg">
          <a href="#">
            <img src="./images/banner01.jpg" class="bg-img"></img>
          </a>
      </div>
      <!-- 页面顶部广告背景结束 -->
    </header>
    <!-- 页面头部区域结束 -->
    <!-- 页面主体内容开始 -->
    <main>
      
      <!-- 娱乐导航区域开始 -->
      <ul class="amusement-nav">
        <li>
          <a href="#">
            <span class="nav-icon"></span>
            <span>攻略·景点</span>
          </a>
        </li>
        <li>
          <a href="#">
            <span class="nav-icon"></span>
            <span>门票·玩乐</span>
          </a>
        </li>
        <li>
          <a href="#">
            <span class="nav-icon"></span>
            <span>美食林</span>
          </a>
        </li>
        <li>
          <a href="#">
            <span class="nav-icon"></span>
            <span>周边游</span>
          </a>
        </li>
        <li>
          <a href="#">
            <span class="nav-icon"></span>
            <span>一日游</span>
          </a>
        </li>
      </ul>
      <!-- 娱乐导航区域结束 -->
      <div class="main-nav">
      <!-- 行程导航区域开始 -->
      <ul class="journey-nav hotel">
        <li>
          <a href="#">
            <span>酒店</span>
          </a>
        </li>
        <li>
          <a href="#">
            <span>民宿·客栈</span>
          </a>
        </li>
        <li>
          <a href="#">
            <span>特价·爆款</span>
          </a>
        </li>
      </ul>
      <ul class="journey-nav ticket">
        <li>
          <a href="#">
            <span>机票</span>
          </a>
        </li>
        <li>
          <a href="#">
            <span>火车票</span>
          </a>
        </li>
        <li>
          <a href="#">
            <span>汽车·船票</span>
          </a>
        </li>
        <li>
          <a href="#">
            <span>专车·租车</span>
          </a>
        </li>
      </ul>
      <ul class="journey-nav trip">
        <li>
          <a href="#">
            <span>旅游</span>
          </a>
        </li>
        <li>
          <a href="#">
            <span>高铁游</span>
          </a>
        </li>
        <li>
          <a href="#">
            <span>邮轮游</span>
          </a>
        </li>
        <li>
          <a href="#">
            <span>定制游</span>
          </a>
        </li>
      </ul>
      <!-- 行程导航区域结束 -->
    </div>
      <!-- 生活导航区域开始 -->
      <ul class="life-nav">
        <li>
          <a href="#">
            <i></i>
            <span>自由行</span>
          </a>
        </li>
        <li>
          <a href="#">
            <i></i>
            <span>WiFi电话卡</span>
          </a>
        </li>
        <li>
          <a href="#">
            <i></i>
            <span>保险·签证</span>
          </a>
        </li>
        <li>
          <a href="#">
            <i></i>
            <span>换钞·购物</span>
          </a>
        </li>
        <li>
          <a href="#">
            <i></i>
            <span>向导·包车</span>
          </a>
        </li>
        <li>
          <a href="#">
            <i></i>
            <span>特价机票</span>
          </a>
        </li>
        <li>
          <a href="#">
            <i></i>
            <span>礼品卡</span>
          </a>
        </li>
        <li>
          <a href="#">
            <i></i>
            <span>申卡·借钱</span>
          </a>
        </li>
        <li>
          <a href="#">
            <i></i>
            <span>社区</span>
          </a>
        </li>
        <li>
          <a href="#">
            <i></i>
            <span>更多</span>
          </a>
        </li>
      </ul>
      <!-- 生活导航区域结束 -->
      <!-- 热门活动优惠区域开始 -->
      <div class="hot-activity">
        <h2>
          <i></i>
        </h2>
        <a class="more" href="#">获取更多福利</a>
      </div>
      <div class="on-sale">
        <a href="#">
          <img src="./images/activity_01.png" />
          <span>广告</span>
        </a>
        <a href="#">
          <img src="./images/activity_02.jpg" />
          <span>广告</span>
        </a>
      </div>
      <!-- 热门活动优惠区域结束 -->
    </main>
    <!-- 页面主体内容结束 -->
    <!-- 页面页脚开始 -->
    <footer></footer>
    <!-- 页面页脚结束 -->
  </body>
</html>
